<!--
 * Copyright (c) 2009 Regents of the University of California (Regents). Created
 * by TELS, Graduate School of Education, University of California at Berkeley.
 *
 * This software is distributed under the GNU Lesser General Public License, v2.
 *
 * Permission is hereby granted, without written agreement and without license
 * or royalty fees, to use, copy, modify, and distribute this software and its
 * documentation for any purpose, provided that the above copyright notice and
 * the following two paragraphs appear in all copies of this software.
 *
 * REGENTS SPECIFICALLY DISCLAIMS ANY WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 * PURPOSE. THE SOFTWAREAND ACCOMPANYING DOCUMENTATION, IF ANY, PROVIDED
 * HEREUNDER IS PROVIDED "AS IS". REGENTS HAS NO OBLIGATION TO PROVIDE
 * MAINTENANCE, SUPPORT, UPDATES, ENHANCEMENTS, OR MODIFICATIONS.
 *
 * IN NO EVENT SHALL REGENTS BE LIABLE TO ANY PARTY FOR DIRECT, INDIRECT,
 * SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, INCLUDING LOST PROFITS,
 * ARISING OUT OF THE USE OF THIS SOFTWARE AND ITS DOCUMENTATION, EVEN IF
 * REGENTS HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 *
 * @author: Hiroki Terashima
-->
<html>
<head>

<link rel="stylesheet" type="text/css" href="../common/css/htmlAssessment.css" />
<link rel="stylesheet" type="text/css" href="fillin.css" />
<link rel="stylesheet" type="text/css" href="../common/css/niftyCorners.css" />

<script type="text/javascript" src="../common/js/loadxmldoc.js"></script>
<!-- YUI Seed -->
<script src="http://yui.yahooapis.com/3.0.0pr2/build/yui/yui-min.js" type="text/javascript"></script>
<script type="text/javascript" src="../common/js/helperfunctions.js"></script>
<script type="text/javascript" src="textentryinteraction.js" ></script>                
<script type="text/javascript" src="fillinstate.js" ></script>                
<script type="text/javascript" src="fillin.js" ></script>                

<script type="text/javascript">
var or;   // global variable so it can be accessed by other functions
var states = [];  // array of FILLINSTATE objects

var currentTextEntryInteractionIndex = 0;

function renderFILLIN() {
  var xmlDoc=loadXMLDoc("fillin_sample.xml");
  fi = new FILLIN(xmlDoc);
  fi.render(currentTextEntryInteractionIndex);
}

function save() {
	fi.save();
}

function edit() {
	fi.edit();
}

/**
 * xmlString contains QTI-coded xml content
 */
function loadXMLString(xmlString) {
	  var xmlDoc=loadXMLDocFromString(xmlString);	
	  fi = new FILLIN(xmlDoc);
	  fi.render();	
}

function checkAnswer() {
	fi.checkAnswer();
}

function tryAgain() {
	fi.tryAgain();
}

function next() {
	var isNextDisabled = hasClass("nextButton", "disabledLink");

	if (isNextDisabled) {
		return;
	}

	currentTextEntryInteractionIndex++;
	fi.render(currentTextEntryInteractionIndex);
}

</script>

<!--  Javascript Pop up window -->
<script type="text/javascript">

var newWin = null;
function popUp(strURL, strType, strHeight, strWidth) {
 if (newWin != null && !newWin.closed)
   newWin.close();
 var strOptions="";
 if (strType=="console")
   strOptions="resizable,height="+
     strHeight+",width="+strWidth;
 if (strType=="fixed")
   strOptions="status,height="+
     strHeight+",width="+strWidth;
 if (strType=="elastic")
   strOptions="toolbar,menubar,scrollbars,"+
     "resizable,location,height="+
     strHeight+",width="+strWidth;
 newWin = window.open(strURL, 'newWin', strOptions);
 newWin.focus();
}

</script>

<!--  Nifty Cube for Rounded Corners -->

<script type="text/javascript" src="../common/js/niftycube.js"></script>
<script type="text/javascript">
window.onload=function(){
Nifty("div#locationBar2","bottom,small");
Nifty("div#questionCountBox","bl tr, large");
Nifty("div#leftColumn,div#rightColumn","same-height none bll tr big");

}
</script>


</head>

<body>

<div id="centeredDiv">

<div id="questionCountBox" class="BG3">
		<div class="instructionsReminder">For instructions click <a href="FillBlankInfoBox.html" onclick="popUp(this.href,'console',450,720);return false;" target="_blank">&nbsp;&nbsp;&nbsp;&nbsp;</a></div><table id="questionTable">
		<tr>
		<td id="questionNumber">Question X of Y:</td>
	    <td id="questionType">Fill the Blank</td>
		<td id="questionHelp"><a href="FillBlankInfoBox.html" onclick="popUp(this.href,'console',700,720);return false;" target="_blank">&nbsp&nbsp&nbsp</a></td>
		</tr>
		</tr>
	</table>
</div>   <!-- end of questionNumberBox -->

<div>

	<div id="promptDiv" class="Color1">Fill each blank with the correct word or short phrase.</div>
</div>

<div id="currentFillBlankParagraph">
	
	<div id="leftColumn">
			<div class="itemLabel">fill in the blanks</div>
			<div id="nonInteractiveDiv"></div>
			<br/>
			<div class="itemLabel">answer</div>
			<div id="interactiveDiv"></div>
	</div>
	
	<div id="rightColumn"> 
		<a href=""><img src="../../../images/robots/fill_blanks.png" alt="Robot Art Open Response" width="100" height="250" border="0" /></a>
	</div>
</div>

<div id="clearBoth"></div>

<div id="feedbackDiv"></div>   <!-- styled in htmlAssessment.css -->

<!-- Anchor-Based Button Layout using TABLE -->

	<div id="buttonDiv">
		<table id="buttonTable">
		   <tr>
		   	<td><a href="#" id="checkAnswerButton" onClick="javascript:checkAnswer();" >Check Blank</a></td>
	   	   </tr>
	   	 </table>
	</div>

<table id="triesContainer">
	<tr>
		<th id="totalTries">Number of Tries for the Current Blank:</th>
		<td><b>X</b></td>
	</tr>
	<tr>
	    <th id="remainingTries">Total number of Tries: </th>
	    <td><b>Y</b></td>
	   </tr>
</table>

</div>   <!-- end centered Div -->


<script type="text/javascript">
renderFILLIN();
</script>

</body>
</html>
